<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="assets/js/jquery-3.2.1.min.js"></script>
    <script src="assets/js/xcConfirm.js"></script>
    <script src="assets/js/js.js"></script>
    <LINK href="assets/css/css.css" type=text/css rel=stylesheet>
    <title></title>
</head>
<style>
    .imgt{ width:40px; height:20px; line-height:20px; background:#737373; color:#FFF; text-align:center}
    .imgv{ width:600px; height:600px; margin:50px auto; clear:both; text-align:center; vertical-align:central;}
    .imgv img{ width:100%}
    .toolv{ height:50px; padding:20px 0 0 75px}

    input[type="range"] {-webkit-box-shadow: 0 1px 0 0px #999, 0 1px 0 #999 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;margin-top: 2px;background-color: #999;border-radius:5px;width: 100px;-webkit-appearance: none;height:10px;}
    input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;cursor: default;height: 10px;top:5px;width:10px;background: #FFF;border-radius: 5px;-webkit-box-shadow: 0 -1px 1px black inset;}
    input[type=range]:focus {outline: none;}

    .toolv0{ float:left;}
    .color0{ width:20px; height:20px; float:left; border:2px solid #FFF}
    .color1{ width:20px; height:20px; float:left; border:2px solid #4da7fd}

    .sbtn0{ width:50px; height:32px; line-height:32px; background:#444;    color:#FFF; float:left; border-radius:0; padding:0; border:0; font-size:12px; border-right:0.5px solid #999; outline:0}
    .sbtn1{ width:50px; height:32px; line-height:32px; background:#666;    color:#FFF; float:left; border-radius:0; padding:0; border:0; font-size:12px; border-right:0.5px solid #999; outline:0}
    .sbtn2{ width:50px; height:32px; line-height:32px; background:#4da7fd; color:#FFF; float:left; border-radius:0; padding:0; border:0; font-size:12px; border-right:0.5px solid #999; outline:0;font-weight:bold}
    .sbtn2:focus{ outline:0}
    .rangev{ width:102px; height:32px; float:left; margin-left:25px;}
    .rangev0{ width:100px; height:18px; margin-left:2px}
    .rangev0 label{ margin-left:15px; float:right}

    .svbtn0{background:#4f97e7;border:1px solid #3085e3;width:100px;height:32px;font-size:12px;padding:0px 10px 0px 10px; color:#FFF;font-family:微软雅黑;border-radius:2px; font-size:14px}
    .svbtn1{background:#4da7fd;border:1px solid #4da7fd;width:100px;height:32px;;font-size:12px;padding:0px 10px 0px 10px;color:#FFF;font-family:微软雅黑;border-radius:2px; font-size:14px;}
</style>
<script>

    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
</script>
<body style="margin:0; padding:0; background:#FFF">
<div style="width:100%; height:700px; background:#eee; ">
    <div style="width:50%; height:700px;float:left; border-right:1px solid #FFF;">
        <div class="imgt" style="float:right">原图</div>
        <div class="imgv">
            <canvas id="canvas0" width="600" height="600">
                当前浏览器不支持图片编辑，请使用高版本Chrome浏览器
            </canvas>
        </div>
    </div>
    <div style="width:49%; height:700px; float:left;">
        <div class="imgt" style="float:left">效果</div>
        <div class="imgv">
            <canvas id="canvas1" width="600" height="600">
                <!--当前浏览器不支持图片编辑，请使用高版本Chrome浏览器-->
            </canvas>
        </div>
    </div>
</div>
<div class="toolv">
    <div class="toolv0" id="btnv">
        <button class="sbtn0" id="btnOne" style="width:60px;border-top-left-radius:16px; border-bottom-left-radius:16px">一键通</button>
        <button class="sbtn0" id="btnHold">保留</button>
        <button class="sbtn0" id="btnDisColor">去色</button>
        <button class="sbtn0" id="btnDel">删除</button>

        <button class="sbtn0" id="btnRect" style="margin-left:2px">矩形</button>
        <button class="sbtn0" id="btnBack">后退</button>
        <button class="sbtn0" id="btnForward">前进</button>
        <button class="sbtn0" id="btnStart" style="width:60px;border-top-right-radius:16px; border-bottom-right-radius:16px">重做</button>
    </div>
    <div class="toolv0" style="margin-left:1px">
        <div class="rangev">
            <div class="rangev0">色系近似<label id="lblColors">5</label></div>
            <input type="range" id="ragColors" min="1" max="100" step="1" value="5" />
        </div>
        <div class="rangev">
            <div class="rangev0">笔刷大小<label id="lblBrush">20px</label></div>
            <input type="range" id="ragBrush" min="1" max="50" step="1" value="20" />
        </div>
        <div class="rangev">
            <div class="rangev0">边缘平滑<label id="lblSmooth">0px</label></div>
            <input type="range" id="ragSmooth" min="0" max="10" step="1" value="0" >
        </div>
    </div>

    <div class="toolv0" style="margin-left:30px; padding-top:5px">
        <div class="color0" style="width:40px">背景色</div><div class="color1" style="background:#FFF" title="白色"></div>
    </div>
    <div class="toolv0" style=" float:right; margin-right:75px">
        <button class="svbtn0" id="btnSave" onMouseOver="this.className='svbtn1';" onMouseOut="this.className='svbtn0';">编辑完成</button>
    </div>
</div>
</body>

<script>
    var url=GetQueryString("url");

    (function(){
        var paint={
            init:function(){this.load();},
            load:function()
            {
                this.curv=0,			//当前版本，imgRGBData数组下标
                    this.imgOriWidth=0,	//图片原始大小
                    this.imgOriHeight=0,
                    this.img0Width=0,		//画布大小
                    this.img0Height=0,
                    this.opFlag="",		//当前操作
                    this.colors=5,		//色系近似度
                    this.brush=20,			//笔刷大小
                    this.smooth=0,			//平滑度
                    this.bgColor=[255,255,255],
                    this.mouseFlag=false,	//鼠标操作标志
                    this.mouseX0=0, 		// 鼠标开始移动的位置X
                    this.mouseY0=0, 		// 鼠标开始移动的位置Y
                    this.mouseX1=0, 		// 鼠标结束移动的位置X
                    this.mouseY1=0, 		// 鼠标结束移动的位置Y
                    this.x=[];//记录鼠标移动是的X坐标
                this.y=[];//记录鼠标移动是的Y坐标
                this.clickDrag=[];
                this.lock=false;//鼠标移动前，判断鼠标是否按下

                this.imgRGBData=[],
                    this.imgHSVData=[],
                    this.dispArr=[],
                    this.cvs0 = document.getElementById("canvas0");
                this.cvs1 = document.getElementById("canvas1");
                this.cxt0=this.cvs0.getContext('2d');
                this.cxt0.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式
                this.cxt0.lineWidth = 20;//线条的宽度
                this.cxt1=this.cvs1.getContext('2d');

                this.touch =("createTouch" in document);//判定是否为手持设备
                this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代
                this.MoveEvent = this.touch ? "touchmove" : "mousemove";
                this.EndEvent = this.touch ? "touchend" : "mouseup";

                this.btnOne=$("#btnOne");
                this.btnHold=$("#btnHold");
                this.btnDisColor=$("#btnDisColor");
                this.btnDel=$("#btnDel");
                this.btnRect=$("#btnRect");
                this.btnBack=$("#btnBack");
                this.btnStart=$("#btnStart");
                this.btnSave=$("#btnSave");
                this.img0 = new Image();

                this.bind();
            },
            bind:function()
            {
                var t=this;

                t.getBase64(url);

                //待图片加载完后，将其显示在canvas上，并得到imgData[0],
                this.img0.onload = function(){

                    t.imgOriWidth=this.width;
                    t.imgOriHeight=this.height;
                    t.img0Width = $("#canvas0").width();
                    t.img0Height = $("#canvas0").height();

                    var ctx0 = t.cxt0;
                    ctx0.drawImage(this, 0, 0,t.imgOriWidth,t.imgOriHeight,0,0,t.img0Width,t.img0Height);
                    var ctx1 = t.cvs1.getContext('2d');
                    ctx1.drawImage(this, 0, 0,t.imgOriWidth,t.imgOriHeight,0,0,t.img0Width,t.img0Height);

                    var arr = ctx0.getImageData(0, 0, t.img0Width, t.img0Height);
                    var tmpArr=new Array();
                    for(var i=0;i<arr.data.length;i+=4)
                    {
                        var arr0=[arr.data[i+0],arr.data[i+1],arr.data[i+2]]
                        tmpArr.push(arr0);
                        t.imgHSVData.push(t.toHSV(arr0));
                    }
                    t.imgRGBData.push(tmpArr);

                    $('.tips').fadeOut(0);
                };

                this.cvs0['on'+t.StartEvent]=function(e)
                {
                    switch(t.opFlag)
                    {
                        case "disColor":
                            var touch=t.touch ? e.touches[0] : e;
                            var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
                            var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点
                            t.movePoint(_x,_y);								//记录鼠标位置
                            t.drawPoint(t.brush,"red");						//绘制路线
                            t.lock=true;
                            t.disColorArr(_x,_y,t.brush);
                            break;
                        case "hold":
                            var touch=t.touch ? e.touches[0] : e;
                            var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
                            var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点
                            t.movePoint(_x,_y);								//记录鼠标位置
                            t.drawPoint(t.brush,"blue");									//绘制路线
                            t.lock=true;
                            t.arcHold(_x,_y,t.brush);
                            break;
                        case "drawRect":
                            t.mouseX0 = 0;
                            t.mouseY0 = 0;
                            t.mouseX1 = 0;
                            t.mouseY1 = 0;

                            t.mouseFlag = true;
                            $('#canvas0').css("cursor","point");
                            t.mouseX0 = e.offsetX; // 鼠标落下时的X
                            t.mouseY0 = e.offsetY; // 鼠标落下时的Y
                            break;
                    }
                };
                /*鼠标移动事件*/
                this.cvs0['on'+t.MoveEvent]=function(e)
                {
                    var touch=t.touch ? e.touches[0] : e;
                    if(t.lock)//t.lock为true则执行
                    {
                        var _x=touch.clientX - touch.target.offsetLeft;	//鼠标在画布上的x坐标，以画布左上角为起点
                        var _y=touch.clientY - touch.target.offsetTop;	//鼠标在画布上的y坐标，以画布左上角为起点
                        t.movePoint(_x,_y,true);						//记录鼠标位置
                        switch(t.opFlag)
                        {
                            case "disColor":
                                t.drawPoint(t.brush,"red");
                                /*									//绘制路线
                                t.cxt1.beginPath();
                                t.cxt1.arc(_x,_y,t.brush,0, Math.PI * 2);
                                t.cxt1.fillStyle="white";
                                t.cxt1.closePath();
                                t.cxt1.fill();
                                */
                                t.disColorArr(_x,_y,t.brush);
                                break;
                            case "hold":
                                t.drawPoint(t.brush,"blue");									//绘制路线
                                t.arcHold(_x,_y,t.brush);
                                break;
                        }
                    }
                };
                this.cvs0['on'+t.EndEvent]=function(e)
                {
                    switch(t.opFlag)
                    {
                        case "disColor":
                            showWarning(0,"图片生成中",200,60);

                            var ctx1 = t.cvs1.getContext('2d');
                            var c1 = ctx1.getImageData(0,0,t.img0Width,t.img0Height);

                            for(var i=0;i<c1.data.length;i=i+4)
                            {
                                /*
                                if(t.inArray(t.dispArr,[c1.data[i],c1.data[i+1],c1.data[i+2]]))
                                {
                                    c1.data[i]=t.bgColor[0];
                                    c1.data[i+1]=t.bgColor[1];
                                    c1.data[i+2]=t.bgColor[2];
                                    //break;
                                }
                                */
                                if(c1.data[i]==t.bgColor[0] && c1.data[i+1]==t.bgColor[1] && c1.data[i+2]==t.bgColor[2]) continue;
                                for(var j=0;j<t.dispArr.length;j++)
                                {
                                    if(t.xsd(t.dispArr[j],[c1.data[i],c1.data[i+1],c1.data[i+2]])<=t.colors)
                                    {
                                        c1.data[i]=t.bgColor[0];
                                        c1.data[i+1]=t.bgColor[1];
                                        c1.data[i+2]=t.bgColor[2];
                                        break;
                                    }
                                }
                            }
                            ctx1.putImageData(c1,0,0);
                            $('.tips').fadeOut(0);

                            t.lock=false;
                            t.x=[];
                            t.y=[];
                            t.clickDrag=[];
                            t.dispArr=[];
                            clearInterval(t.Timer);
                            t.Timer=null;

                            t.getVersion();
                            break;
                        case "hold":
                            /*重置数据*/
                            t.lock=false;
                            t.x=[];
                            t.y=[];
                            t.clickDrag=[];
                            clearInterval(t.Timer);
                            t.Timer=null;

                            t.getVersion();
                            break;
                        case "drawRect":
                            var x=e.offsetX;
                            var y=e.offsetY;
                            if(x>t.mouseX0)t.mouseX1 = x;
                            else
                            {
                                t.mouseX1 = t.mouseX0;
                                t.mouseX0 = x;
                            }
                            if(y>t.mouseY0) t.mouseY1=y;
                            else
                            {
                                t.mouseY1 = t.mouseY0;
                                t.mouseY0 = y;
                            }
                            if(t.mouseX0<0) t.mouseX0=0;
                            if(t.mouseX0>t.img0Width) t.mouseX0=t.img0Width;
                            if(t.mouseY0<0) t.mouseY0=0;
                            if(t.mouseY0>t.img0Height) t.mouseY0=t.img0Height;
                            if(t.mouseX1<0) t.mouseX1=0;
                            if(t.mouseX1>t.img0Width) t.mouseX1=t.img0Width;
                            if(t.mouseY1<0) t.mouseY1=0;
                            if(t.mouseY1>t.img0Height) t.mouseY1=t.img0Height;

                            t.mouseX0=parseInt(t.mouseX0);
                            t.mouseY0=parseInt(t.mouseY0);
                            t.mouseX1=parseInt(t.mouseX1);
                            t.mouseY1=parseInt(t.mouseY1);

                            t.drawRect0(e);
                            t.mouseFlag = false;
                            break;
                    }
                };

                this.btnDisColor.onclick=function()
                {
                    t.resetBtn(this);
                    t.opFlag="disColor";
                };
                //删除矩形块
                $("#btnDel").click(function(){
                    t.resetBtn(this);
                    showWarning(0,"图片处理中",200,60);
                    if(t.opFlag!="drawRect")
                    {
                        showWarning(0,"请先圈定删除区域",200,60);
                        $('.tips').fadeOut(1500);
                        return;
                    }

                    t.opFlag="delRock";
                    var ctx1 = t.cvs1.getContext('2d');
                    var c1 = ctx1.getImageData(t.mouseX0,t.mouseY0,t.mouseX1-t.mouseX0,t.mouseY1-t.mouseY0);
                    for(var i=0;i<c1.data.length;i=i+4)
                    {
                        c1.data[i]=t.bgColor[0];
                        c1.data[i+1]=t.bgColor[1];
                        c1.data[i+2]=t.bgColor[2];
                    }
                    ctx1.putImageData(c1,t.mouseX0,t.mouseY0);
                    //t.clearRect();
                    t.cvs0Reset();

                    t.getVersion();
                    $('.tips').fadeOut(1500);
                });

                //一键通
                $("#btnOne").click(function(){
                    t.resetBtn(this);
                    t.opFlag="one";
                    /*
                    //四边各取50像素
                    var scope=30;
                    var arr=new Array(); //r,g,b，100

                    //上通行
                    for(var i=0;i<scope;i++)
                    {
                        for(j=0;j<t.img0Width;j++)
                        {
                            var pos=i*t.img0Width+j;
                            arr=t.disRepeatArr(arr,[t.imgRGBData[0][pos][0],t.imgRGBData[0][pos][1],t.imgRGBData[0][pos][2],0]);
                        }
                    }
                    //下通行
                    for(var i=t.img0Height-scope;i<t.img0Height;i++)
                    {
                        for(j=0;j<t.img0Width;j++)
                        {
                            var pos=i*t.img0Width+j;
                            arr=t.disRepeatArr(arr,[t.imgRGBData[0][pos][0],t.imgRGBData[0][pos][1],t.imgRGBData[0][pos][2],0]);
                        }
                    }
                    //左半列
                    for(var i=scope;i<t.img0Height-scope;i++)
                    {
                        for(var j=0;j<scope;j++)
                        {
                            var pos=i*t.img0Width+j;
                            arr=t.disRepeatArr(arr,[t.imgRGBData[0][pos][0],t.imgRGBData[0][pos][1],t.imgRGBData[0][pos][2],0]);
                        }
                    }
                    //右半列
                    for(var i=scope;i<t.img0Height-scope;i++)
                    {
                        for(var j=t.img0Width-scope;j<t.img0Width;j++)
                        {
                            var pos=i*t.img0Width+j;
                            arr=t.disRepeatArr(arr,[t.imgRGBData[0][pos][0],t.imgRGBData[0][pos][1],t.imgRGBData[0][pos][2],0]);
                        }
                    }

                    //初始化相似指数
                    for(var i=0;i<arr.length;i++)
                    {
                        var x=0;
                        for(var j=0;j<arr.length;j++)
                        {
                            if(t.xsd(arr[i],arr[j])<=t.colors)
                            {
                                x++;
                            }
                        }
                        arr[i][3]=x;
                    }

                    //按指数从高到低排序
                    var reArr=new Array();
                    for(var i=0;i<arr.length;i++)
                    {
                        var m=arr[i][3],x=0;
                        for(var j=0;j<arr.length;j++)
                        {
                            if(arr[j][3]>m)
                            {
                                m=arr[j][3];
                                x=j;
                            }
                        }
                        reArr.push(arr[x]);
                        arr.splice(x, 1);
                    }

                    var s="";
                    for(var i=0;i<reArr.length;i++)
                    {
                        s+=reArr[i][0]+","+reArr[i][1]+","+reArr[i][2]+","+reArr[i][3]+"<br>";
                    }
                    $("#ack").html(s)

                    reArr.length=parseInt(reArr.length/3);

                    //替换
                    var ctx1 = t.cxt1;
                    var c1 = ctx1.getImageData(0,0,t.img0Width,t.img0Height);
                    for(var i=0;i<c1.data.length;i=i+4)
                    {
                        //数组元素arr1检测是否存在于arr0中
                        if(t.inArray(reArr,[c1.data[i],c1.data[i+1],c1.data[i+2]]))
                        {
                            var d=i/4;
                            c1.data[i]  =t.bgColor[0];
                            c1.data[i+1]=t.bgColor[1];
                            c1.data[i+2]=t.bgColor[2];
                        }
                    }
                    ctx1.putImageData(c1,0,0);

                    t.curv++;
                    t.getVersion();
                    */
                    showWarning(0,"此功能暂未开放",200,60);
                    $('.tips').fadeOut(1500);
                });

                //保留
                $("#btnHold").click(function(){
                    t.resetBtn(this);
                    t.opFlag="hold";
                    t.getVersion();
                });

                //去色
                $("#btnDisColor").click(function(){
                    t.resetBtn(this);
                    t.opFlag="disColor";
                });

                //画矩形
                $("#btnRect").click(function(){
                    t.resetBtn(this);
                    t.opFlag="drawRect";
                });

                //后退
                $("#btnBack").click(function(){
                    t.resetBtn(this);
                    showWarning(0,"图片处理中",200,60);
                    t.curv=t.curv-1;
                    if(t.curv<0) t.curv=0;
                    t.resetCanvas1();
                    $('.tips').fadeOut(1500);
                });
                //前进
                $("#btnForward").click(function(){
                    t.resetBtn(this);
                    showWarning(0,"图片处理中",200,60);
                    t.curv++;
                    if(t.curv>t.imgRGBData.length-1) t.curv=t.imgRGBData.length-1;
                    t.resetCanvas1();
                    $('.tips').fadeOut(1500);
                });

                //重来
                $("#btnStart").click(function(){
                    t.resetBtn(this);
                    showWarning(0,"图片处理中",200,60);
                    t.curv=0;
                    t.resetCanvas1();
                    $('.tips').fadeOut(1500);
                });

                //保存
                $("#btnSave").click(function(){
                    var base64 = t.cvs1.toDataURL("image/jpeg", 1.0);
                    var fname=url.substring(url.lastIndexOf("/")+1);

                    //var blob = t.dataURItoBlob(base64Data);
                    var fd = new FormData();
                    fd.append("base64", base64);
                    fd.append("fname", fname);

                    $.ajax({
                        type: "POST",
                        url: 'http://ssl.zuzhiweiyuan.com/Spider1688/ImgSave',
                        data: {
                            "width":t.imgOriWidth,
                            "height":t.imgOriHeight,
                            "fname": fname,
                            "base64": base64.substr(base64.indexOf(',') + 1)
                        },    //视情况将base64的前面字符串data:image/png;base64,删除
                        cache: false,
                        success: function(data)
                        {
                            var o={};
                            eval("o="+data);
                            if(o.ErrorCode!=0)
                            {
                                alert(o.ErrorMsg);
                                return;
                            }
                            //返回o.newImg处理
                            for(var i=0;i<parent.imgArr.length;i++)
                            {
                                if(parent.imgArr[i]==url)
                                {
                                    parent.imgArr[i]=o.newImg;
                                    break;
                                }
                            }
                            for(var i=0;i<parent.colors.length;i++)
                            {
                                var tmp1=parent.colors[i].split(',');
                                var img=tmp1[1].replace("imageUrl:","");

                                if(img==url)
                                {
                                    parent.colors[i].replace(img,o.newImg);
                                    break;
                                }
                            }

                            parent.showImg();
                            showWarning(0,"操作完成",200,60);
                            $('.tips').fadeOut(1500);
                            parent.document.getElementById("popWinClose").click();
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown)
                        {
                            alert("上传失败，请检查网络后重试");
                        }
                    });
                });


                //色系近似度更改
                $("#ragColors").change(function()
                {
                    $("#lblColors").html(this.value);
                    t.colors=this.value;
                });

                //笔刷更改
                $("#ragBrush").change(function()
                {
                    $("#lblBrush").html(this.value+"px");
                    t.brush=this.value;
                });
                //平滑度更改
                $("#ragSmooth").change(function()
                {
                    $("#lblSmooth").html(this.value+"px");
                    t.smooth=this.value;
                });


            },

            exLocationX:function(x)
            {
                if(x<0) x=0;
                if(x>this.img0Width) x=this.img0Width;
                return parseInt(x);
            },
            exLocationY:function(y)
            {
                if(y<0) y=0;
                if(y>this.img0Height) y=this.img0Height;
                return parseInt(y);
            },
            disColorArr:function(x,y,brush)
            {
                var r=brush/2;
                var a0=x-r,b0=y-r;
                var a1=x+r,b1=y+r;

                a0=this.exLocationX(a0);
                b0=this.exLocationY(b0);
                a1=this.exLocationX(a1);
                b1=this.exLocationY(b1);

                var rs=r*r;

                for(var i=b0;i<=b1;i++)
                {
                    for(var j=a0;j<=a1;j++)
                    {
                        var xs=j-x,ys=i-y;
                        if(xs*xs+ys*ys<=rs)
                        {
                            var q=i*this.img0Width+j;
                            this.dispArr=this.disRepeatArr(this.dispArr,this.imgRGBData[0][q]);
                        }
                    }
                }
            },
            arcHold:function(x,y,brush)
            {
                var r=brush/2;
                var a0=x-r,b0=y-r;
                var a1=x+r,b1=y+r;

                a0=this.exLocationX(a0);
                b0=this.exLocationY(b0);
                a1=this.exLocationX(a1);
                b1=this.exLocationY(b1);

                var ctx1 = this.cvs1.getContext('2d');
                var c1 =  ctx1.getImageData(0, 0, this.img0Width, this.img0Height);
                var rs=r*r;

                for(var i=b0;i<=b1;i++)
                {
                    for(var j=a0;j<=a1;j++)
                    {
                        var xs=j-x,ys=i-y;
                        if(xs*xs+ys*ys<rs)
                        {
                            var p=i*4*c1.width+4*j;
                            var q=i*c1.width+j;
                            c1.data[p]=this.imgRGBData[0][q][0]
                            c1.data[p+1]=this.imgRGBData[0][q][1]
                            c1.data[p+2]=this.imgRGBData[0][q][2]
                        }
                    }
                }
                ctx1.putImageData(c1,0,0);

            },
            movePoint:function(x,y,dragging)
            {
                /*将鼠标坐标添加到各自对应的数组里*/
                this.x.push(x);
                this.y.push(y);
                this.clickDrag.push(y);
            },
            drawPoint:function(brush,color)
            {
                this.cxt0.strokeStyle =color;
                this.cxt0.lineWidth = brush;
                console.log("brush:",brush);
                for(var i=0; i < this.x.length; i++)//循环数组
                {
                    this.cxt0.beginPath();//context.beginPath() , 准备绘制一条路径
                    if(this.clickDrag[i] && i)
                    {//当是拖动而且i!=0时，从上一个点开始画线。
                        this.cxt0.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点
                    }
                    else
                    {
                        this.cxt0.moveTo(this.x[i]-1, this.y[i]);
                    }
                    this.cxt0.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来
                    this.cxt0.closePath();//context.closePath() , 如果当前路径是打开的则关闭它
                    this.cxt0.stroke();//context.stroke() , 绘制当前路径
                }
            },
//测试 RGB空间相似度
            xsd:function(arr0,arr1)
            {
                var rmean = (arr0[0] +arr1[0] ) / 2
                var R = arr0[0] - arr1[0]
                var G = arr0[1] -arr1[1]
                var B = arr0[2] - arr0[2]
                return Math.sqrt((2+rmean/256)*(R*R)+4*(G*G)+(2+(255-rmean)/256)*(B*B));

            },

//RGB转HSV arr:[r,g,b]
            toHSV:function(arr)
            {
                var r=arr[0], g=arr[1],b=arr[2];
                var tmparr=[r,g,b];
                var maxv=Math.max.apply(null, tmparr);
                var minv=Math.min.apply(null, tmparr);
                var h=0;
                if(maxv==minv) return h;
                if(r==maxv) h=(g-b)/(maxv-minv)
                if(g==maxv) h=2+(b-r)/(maxv-minv)
                if(b==maxv) h=4+(r-g)/(maxv-minv)

                h=h*60;
                if(h<0) h=h+360;
                var v=Math.round(maxv/255*100);
                var s=Math.round((maxv-minv)/maxv*100);
                return [h,s,v];
            },

//数组arr1去重归并入arr0
            disRepeatArr:function(arr0,arr1)
            {
                if(!this.inArray(arr0,arr1)) arr0.push(arr1);
                return arr0;
            },
//数组元素arr1检测是否存在于arr0中
            inArray:function(arr0,arr1)
            {
                var ret=false;
                for(var i=0;i<arr0.length;i++)
                {
                    if(arr0[i][0]==arr1[0] && arr0[i][1]==arr1[1] && arr0[i][2]==arr1[2])
                    {
                        ret=true;
                        break;
                    }
                }
                return ret;
            },
//
            resetBtn:function(o)
            {
                $("#btnv button").attr("class","sbtn0");
                o.className="sbtn2";
            },
//画框
            drawRect0:function(e){
                if(this.mouseFlag){
                    var ctx0 = this.cxt0;
                    ctx0.beginPath();
                    ctx0.lineWidth = 1;
                    ctx0.strokeStyle="#F00";
                    ctx0.strokeRect(this.mouseX0,this.mouseY0,this.mouseX1-this.mouseX0,this.mouseY1-this.mouseY0);
                }
            },
//img0恢复初始
            cvs0Reset:function()
            {
                var c = this.cxt0.getImageData(0,0,this.img0Width,this.img0Height);
                for(var i = 0; i < c.height; ++i)
                {
                    for(var j = 0; j < c.width; ++j)
                    {
                        var x = i*4*c.width + 4*j;
                        var y=x/4;
                        c.data[x] =   this.imgRGBData[0][y][0];
                        c.data[x+1] = this.imgRGBData[0][y][1];
                        c.data[x+2] = this.imgRGBData[0][y][2];
                    }
                }
                this.cxt0.putImageData(c,0,0);
            },

//清除画框
            clearRect:function()
            {
                var nx0=this.mouseX0-1,ny0=this.mouseY0-1,nx1=this.mouseX1-this.mouseX0+2,ny1=this.mouseY1-this.mouseY0+2;
                var ctx0 = this.cvs0.getContext('2d');

                var c = ctx0.getImageData(nx0,ny0,nx1,ny1);
                var oWidth=$("#canvas0").width();
                for(var i = 0; i < c.height; ++i)
                {
                    for(var j = 0; j < c.width; ++j)
                    {
                        var x = i*4*c.width + 4*j;
                        var y=  (ny0+i)*oWidth+(nx0+j);
                        c.data[x] =   this.imgRGBData[0][y][0];
                        c.data[x+1] = this.imgRGBData[0][y][1];
                        c.data[x+2] = this.imgRGBData[0][y][2];
                    }
                }
                ctx0.putImageData(c,nx0,ny0);
            },
//取新版本
            getVersion:function()
            {
                var ctx1 = this.cvs1.getContext('2d');
                var arr =  ctx1.getImageData(0, 0, this.img0Width, this.img0Height);
                var tmpArr=new Array();
                for(var i=0;i<arr.data.length;i+=4)
                {
                    var arr0=[arr.data[i+0],arr.data[i+1],arr.data[i+2]]
                    tmpArr.push(arr0);
                }
                this.imgRGBData[++this.curv]=tmpArr;
            },
//canvas1 版本更换
            resetCanvas1:function()
            {
                var ctx1 = this.cxt1;
                var c1 = ctx1.getImageData(0,0,this.img0Width,this.img0Height);
                for(var i=0;i<c1.data.length;i=i+4)
                {
                    var d=i/4;
                    c1.data[i]  =this.imgRGBData[this.curv][d][0];
                    c1.data[i+1]=this.imgRGBData[this.curv][d][1];
                    c1.data[i+2]=this.imgRGBData[this.curv][d][2];
                }
                ctx1.putImageData(c1,0,0);
            },
            getBase64:function (imgUrl)
            {
                var t=this;
                var base64="";
                showWarning(0,"图片载入中",200,60);

                window.URL = window.URL || window.webkitURL;
                var xhr = new XMLHttpRequest();
                xhr.open("get", imgUrl, true);
                xhr.responseType = "blob";
                xhr.onload = function ()
                {
                    if (this.status == 200)
                    {
                        var blob = this.response;
                        var oFileReader = new FileReader();
                        oFileReader.onloadend = function (e)
                        {
                            base64 = e.target.result;
                            console.log("方式一》》》》》》》》》", base64);t.img0.src=base64;
                        };
                        oFileReader.readAsDataURL(blob);
                    }
                }
                xhr.send();

                $('.tips').fadeOut(1500);
            },
            dataURItoBlob:function (base64Data) {
                var byteString;
                if (base64Data.split(',')[0].indexOf('base64') >= 0)
                    byteString = atob(base64Data.split(',')[1]);
                else
                    byteString = unescape(base64Data.split(',')[1]);
                var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
                var ia = new Uint8Array(byteString.length);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ia], {type: mimeString});
            }

        };
        paint.init();
    })();


</script>
</html>